<template>
	<el-dialog v-model="dialogVisible" title="异常反馈详情" width="800px" :before-close="handleClose">
		<div v-if="formData.id">
			<el-descriptions :column="2" border>
				<el-descriptions-item label="ID">{{formData.id}}</el-descriptions-item>
				<el-descriptions-item label="会员ID">{{formData.member_id}}</el-descriptions-item>
				<el-descriptions-item label="订单号">{{formData.ordernum}}</el-descriptions-item>
				<el-descriptions-item label="异常类型">
					<el-tag :type="getTypeTagType(formData.type)">
						{{getTypeName(formData.type)}}
					</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="运单号">
					<span v-if="formData.waybill">{{formData.waybill}}</span>
					<span v-else>-</span>
				</el-descriptions-item>
				<el-descriptions-item label="重量">
					<span v-if="formData.tel_weight">{{formData.tel_weight}}kg</span>
					<span v-else>-</span>
				</el-descriptions-item>
				<el-descriptions-item label="修改金额">
					<span v-if="formData.modity_value && formData.modity_value !== '0.00'">
						{{formData.modity_value}}元
					</span>
					<span v-else>-</span>
				</el-descriptions-item>
				<el-descriptions-item label="状态">
					<el-tag :type="getStatusType(formData.status)">
						{{getStatusText(formData.status)}}
					</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="反馈内容" :span="2">
					{{formData.content}}
				</el-descriptions-item>
				<el-descriptions-item label="创建时间">{{formData.create_time}}</el-descriptions-item>
				<el-descriptions-item label="更新时间">{{formData.update_time}}</el-descriptions-item>
			</el-descriptions>
			
			<!-- 图片展示 -->
			<div v-if="formData.images && formData.images.length > 0" style="margin-top: 20px;">
				<h4>相关图片：</h4>
				<el-image
					v-for="(image, index) in formData.images"
					:key="index"
					:src="image"
					:preview-src-list="formData.images"
					style="width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px;"
					fit="cover"
				></el-image>
			</div>
			
			<!-- 回复记录 -->
			<div v-if="formData.replies && formData.replies.length > 0" style="margin-top: 20px;">
				<h4>回复记录：</h4>
				<el-timeline>
					<el-timeline-item
						v-for="(reply, index) in formData.replies"
						:key="index"
						:timestamp="reply.create_time"
						placement="top"
					>
						<el-card>
							<h4>{{reply.title || '回复'}}</h4>
							<p>{{reply.content}}</p>
							<p v-if="reply.admin_name">处理人：{{reply.admin_name}}</p>
						</el-card>
					</el-timeline-item>
				</el-timeline>
			</div>
		</div>
		
		<!-- 加载状态 -->
		<div v-else-if="loading" style="text-align: center; padding: 50px;">
			<el-icon class="is-loading"><Loading /></el-icon>
			<p>加载中...</p>
		</div>
		
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="handleClose">关闭</el-button>
				<el-button v-if="formData.status == 0" type="primary" @click="handleHandle">受理</el-button>
				<el-button v-if="formData.status == 1" type="warning" @click="handleHandle">回复</el-button>
				<el-button v-if="formData.status == 2" type="success" @click="handleHandle">完结</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
	import { Loading } from '@element-plus/icons-vue'
	
	export default {
		name: 'aftersalesDetail',
		components: {
			Loading
		},
		data() {
			return {
				dialogVisible: false,
				loading: false,
				formData: {},
				typeOptions: [] // 异常类型选项
			}
		},
		mounted() {
			this.getTypeOptions()
		},
		methods: {
			// 获取异常类型选项
			async getTypeOptions() {
				try {
					const res = await this.$API.aftersales.aftersales.secondType.get()
					if (res.code === 200) {
						this.typeOptions = res.data
					}
				} catch (error) {
					console.error('获取异常类型失败:', error)
				}
			},
			
			// 获取异常类型名称
			getTypeName(type) {
				const typeItem = this.typeOptions.find(item => item.type === type)
				return typeItem ? typeItem.name : '未知类型'
			},
			
			// 获取异常类型标签类型
			getTypeTagType(type) {
				// 根据异常类型返回不同的标签颜色
				if ([1, 16, 17, 18, 20].includes(type)) {
					return 'info'    // 催取件、催物流、催派送、更改收件信息、核实退回原因
				} else if ([4, 7, 12, 14, 15, 19].includes(type)) {
					return 'warning' // 重量异常、线下收费、签收未收到货、少件、错件、拦截退回
				} else if ([5, 10, 11].includes(type)) {
					return 'danger'  // 虚假揽收、破损、遗失
				} else if (type === 13) {
					return 'info'    // 服务态度差
				} else {
					return 'info'    // 默认
				}
			},
			
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					0: '未受理',
					1: '未回复',
					2: '已回复',
					3: '已完结'
				}
				return statusMap[status] || '未知状态'
			},
			
			// 获取状态标签类型
			getStatusType(status) {
				const statusMap = {
					0: 'danger',   // 未受理
					1: 'warning',  // 未回复
					2: 'info',     // 已回复
					3: 'success'   // 已完结
				}
				return statusMap[status] || 'info'
			},
			
			// 打开弹窗
			open() {
				this.dialogVisible = true
				return this
			},
			
			// 设置数据并获取详情
			async setData(data) {
				this.loading = true
				this.formData = {}
				try {
					// 调用详情接口获取完整数据
					const res = await this.$API.aftersales.aftersales.detail.get({ id: data.id })
					if (res.code === 200) {
						this.formData = res.data
					} else {
						this.$message.error(res.msg || '获取详情失败')
						// 如果接口失败，使用传入的基础数据
						this.formData = JSON.parse(JSON.stringify(data))
					}
				} catch (error) {
					console.error('获取详情失败:', error)
					this.$message.error('获取详情失败')
					// 如果接口失败，使用传入的基础数据
					this.formData = JSON.parse(JSON.stringify(data))
				} finally {
					this.loading = false
				}
				return this
			},
			
			// 处理
			handleHandle() {
				this.$emit('handle', this.formData)
				this.handleClose()
			},
			
			// 关闭弹窗
			handleClose() {
				this.dialogVisible = false
				this.$emit('closed')
			}
		}
	}
</script>

<style>
</style>
